<template>
  <div id="app">
    <div class="top" v-if="this.$route.meta.showTab">狗眼电影</div>
    <div id="nav" v-if="this.$route.meta.showTab">
      <router-link to="/">正在热映</router-link>
      <router-link to="/about">即将上映</router-link>
    </div>
    <hr />
    <router-view />

    <div class="bot" v-if="this.$route.meta.showTab">
      <hr />
      <router-link class="dy" to="/">电影</router-link>
      <router-link class="yy" to="/cinema">影院</router-link>
      <router-link class="wd" to="/my">我的</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style lang="scss">
body {
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.top {
  width: 100%;
  height: 35px;
  color: white;
  background: orange;
  padding-top: 10px;
}
.bot {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: white;
}
.dy,
.yy,
.wd {
  color: rgb(0, 0, 0);
  font-size: 20px;
  text-decoration: none;
  padding-right: 35px;
  padding-left: 35px;
  &.router-link-exact-active {
    color: orange;
  }
}

#nav {
  padding: 7px;
  a {
    font-weight: bold;
    font-size: 20px;
    margin-left: 30px;
    margin-right: 30px;
    color: rgb(0, 0, 0);
    text-decoration-line: none;
    &.router-link-exact-active {
      color: orange;
      padding-bottom: 7px;
      border-bottom: 3px solid orange;
    }
  }
}
hr {
  font-size: 5px;
  margin: 0px;
}
</style>
